<!DOCTYPE html><html lang="zh-CN"><head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>蟠龙观邸小区管理系统</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&amp;display=swap" rel="stylesheet">
  <style>
    :root {
      --primary: #1a365d;
      --secondary: #2d527e;
      --accent: #3c84b6;
      --success: #10b981;
      --warning: #f59e0b;
      --danger: #ef4444;
      --light-bg: #f8fafc;
      --border: #e2e8f0;
    }
    
    body {
      font-family: 'Noto Sans SC', system-ui, -apple-system, sans-serif;
      background-color: #f1f5f9;
      color: #334155;
      display: flex;
      justify-content: center;
      padding: 24px;
    }
    
    .container {
      width: 1440px;
      height: auto;
      min-height: 100vh;
      background-color: #ffffff;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
      border-radius: 8px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    
    .header {
      background-color: var(--primary);
      color: white;
      padding: 0 32px;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .logo {
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 700;
      font-size: 20px;
    }
    
    .user-menu {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    
    .avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: var(--accent);
      display: grid;
      place-items: center;
      font-weight: 500;
    }
    
    .main-content {
      display: flex;
      flex: 1;
    }
    
    .sidebar {
      width: 260px;
      background-color: #ffffff;
      border-right: 1px solid var(--border);
      padding: 24px 0;
    }
    
    .area-selector {
      padding: 0 24px;
      margin-bottom: 24px;
    }
    
    .area-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    
    .area-tab {
      background-color: var(--light-bg);
      border-radius: 6px;
      padding: 6px 12px;
      font-size: 13px;
      cursor: pointer;
      transition: all 0.2s;
    }
    
    .area-tab.active {
      background-color: var(--primary);
      color: white;
    }
    
    .property-type {
      padding: 0 24px;
      margin-bottom: 24px;
    }
    
    .select-container {
      position: relative;
    }
    
    select {
      width: 100%;
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 8px 12px;
      background-color: white;
      appearance: none;
    }
    
    .select-icon {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
    }
    
    .treeview {
      overflow-y: auto;
      height: calc(100vh - 300px);
      padding: 0 16px;
    }
    
    .tree-node {
      padding: 8px 16px;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .tree-node:hover {
      background-color: var(--light-bg);
    }
    
    .tree-node.active {
      background-color: rgba(26, 54, 93, 0.08);
      color: var(--primary);
      font-weight: 500;
    }
    
    .tree-children {
      margin-left: 20px;
    }
    
    .content {
      flex: 1;
      display: flex;
    }
    
    .building-list {
      width: 260px;
      padding: 24px 16px;
      border-right: 1px solid var(--border);
    }
    
    .resident-section {
      flex: 1;
      padding: 24px;
    }
    
    .section-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 16px;
      color: var(--primary);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .resident-table {
      width: 100%;
      border-collapse: collapse;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    }
    
    .resident-table th {
      text-align: left;
      padding: 12px 16px;
      background-color: var(--light-bg);
      font-weight: 600;
      font-size: 14px;
    }
    
    .resident-table td {
      padding: 12px 16px;
      border-bottom: 1px solid var(--border);
      font-size: 14px;
    }
    
    .status {
      padding: 4px 8px;
      border-radius: 12px;
      font-size: 12px;
    }
    
    .status-normal {
      background-color: rgba(16, 185, 129, 0.12);
      color: var(--success);
    }
    
    .status-warning {
      background-color: rgba(245, 158, 11, 0.12);
      color: var(--warning);
    }
    
    .status-danger {
      background-color: rgba(239, 68, 68, 0.12);
      color: var(--danger);
    }
    
    .chart-box {
      width: 380px;
      padding: 24px;
      background-color: #f8fafc;
      border-left: 1px solid var(--border);
      overflow-y: auto;
    }
    
    .card {
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      padding: 20px;
      margin-bottom: 24px;
    }
    
    .card-header {
      font-size: 15px;
      margin-bottom: 12px;
      color: var(--secondary);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .indicators {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }
    
    .indicator-card {
      padding: 16px;
      border-radius: 8px;
    }
    
    .indicator-value {
      font-size: 24px;
      font-weight: 700;
      margin: 8px 0;
    }
    
    .indicator-title {
      font-size: 13px;
      color: #64748b;
    }
    
    .indicator-icon {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      margin-bottom: 8px;
    }
    
    .pagination {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 24px;
    }
    
    .pagination-btn {
      padding: 6px 12px;
      border-radius: 6px;
      cursor: pointer;
      background-color: white;
      border: 1px solid var(--border);
    }
    
    .pagination-btn.active {
      background-color: var(--primary);
      color: white;
      border-color: var(--primary);
    }
  </style>
</head>
<body>
  <div class="container">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="logo">
        <iconify-icon icon="mdi:office-building" width="28" height="28"></iconify-icon>
        <span>蟠龙观邸小区管理系统</span>
      </div>
      <div class="user-menu">
        <iconify-icon icon="mdi:bell" width="24" height="24"></iconify-icon>
        <div class="avatar">张</div>
        <span>管理员: 张经理</span>
      </div>
    </header>

    <div class="main-content">
      <!-- 左侧功能区导航 -->
      <aside class="sidebar">
        <div class="area-selector">
          <h3>区域选择</h3>
          <div class="area-tabs">
            <div class="area-tab">A区</div>
            <div class="area-tab active">B区</div>
            <div class="area-tab">C区</div>
            <div class="area-tab">D区</div>
            <div class="area-tab">E区</div>
            <div class="area-tab">F区</div>
          </div>
        </div>

        <div class="property-type">
          <h3>房屋类型</h3>
          <div class="select-container">
            <select>
              <option>全部类型</option>
              <option>公租房</option>
              <option>安置房</option>
              <option>商品房</option>
            </select>
            <span class="select-icon">
              <iconify-icon icon="mdi:chevron-down" width="20" height="20"></iconify-icon>
            </span>
          </div>
        </div>

        <h2 class="section-title">
          <iconify-icon icon="mdi:office-building-outline"></iconify-icon>
          楼栋列表
        </h2>

        <div class="treeview">
          <div class="tree-node active">
            <iconify-icon icon="mdi:office-building"></iconify-icon>
            <span>B区 全部楼栋</span>
          </div>
          
          <div class="tree-children">
            <div class="tree-node">
              <iconify-icon icon="mdi:home-group"></iconify-icon>
              <span>1号楼</span>
            </div>
            <div class="tree-children">
              <div class="tree-node">
                <iconify-icon icon="mdi:home"></iconify-icon>
                <span>101室</span>
              </div>
              <div class="tree-node">
                <iconify-icon icon="mdi:home"></iconify-icon>
                <span>102室</span>
              </div>
              <div class="tree-node">
                <iconify-icon icon="mdi:home"></iconify-icon>
                <span>103室</span>
              </div>
            </div>
            
            <div class="tree-node">
              <iconify-icon icon="mdi:home-group"></iconify-icon>
              <span>2号楼</span>
            </div>
            
            <div class="tree-node">
              <iconify-icon icon="mdi:home-group"></iconify-icon>
              <span>3号楼</span>
            </div>
            
            <div class="tree-node">
              <iconify-icon icon="mdi:home-group"></iconify-icon>
              <span>5号楼</span>
            </div>
          </div>
        </div>
      </aside>

      <!-- 主内容区 -->
      <div class="content">
        <!-- 中部住户信息 -->
        <div class="resident-section">
          <h2 class="section-title">
            <iconify-icon icon="mdi:account-group"></iconify-icon>
            住户信息
          </h2>
          
          <table class="resident-table">
            <thead>
              <tr>
                <th>住户姓名</th>
                <th>房号</th>
                <th>房屋类型</th>
                <th>联系电话</th>
                <th>入住日期</th>
                <th>状态</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>李明</td>
                <td>B-1-101</td>
                <td>商品房</td>
                <td>138****1234</td>
                <td>2023-06-15</td>
                <td><span class="status status-normal">正常</span></td>
                <td>
                  <iconify-icon icon="mdi:pencil" style="color: var(--accent); cursor: pointer;"></iconify-icon>
                </td>
              </tr>
              <tr>
                <td>王建国</td>
                <td>B-1-102</td>
                <td>公租房</td>
                <td>159****5678</td>
                <td>2022-11-30</td>
                <td><span class="status status-warning">待处理</span></td>
                <td>
                  <iconify-icon icon="mdi:pencil" style="color: var(--accent); cursor: pointer;"></iconify-icon>
                </td>
              </tr>
              <tr>
                <td>张丽</td>
                <td>B-1-201</td>
                <td>安置房</td>
                <td>187****4321</td>
                <td>2023-03-22</td>
                <td><span class="status status-normal">正常</span></td>
                <td>
                  <iconify-icon icon="mdi:pencil" style="color: var(--accent); cursor: pointer;"></iconify-icon>
                </td>
              </tr>
              <tr>
                <td>赵大伟</td>
                <td>B-2-301</td>
                <td>商品房</td>
                <td>135****8765</td>
                <td>2023-05-10</td>
                <td><span class="status status-danger">异常</span></td>
                <td>
                  <iconify-icon icon="mdi:pencil" style="color: var(--accent); cursor: pointer;"></iconify-icon>
                </td>
              </tr>
              <tr>
                <td>钱思思</td>
                <td>B-3-105</td>
                <td>安置房</td>
                <td>186****2345</td>
                <td>2023-07-18</td>
                <td><span class="status status-normal">正常</span></td>
                <td>
                  <iconify-icon icon="mdi:pencil" style="color: var(--accent); cursor: pointer;"></iconify-icon>
                </td>
              </tr>
              <tr>
                <td>孙明阳</td>
                <td>B-3-203</td>
                <td>公租房</td>
                <td>188****6543</td>
                <td>2023-02-05</td>
                <td><span class="status status-normal">正常</span></td>
                <td>
                  <iconify-icon icon="mdi:pencil" style="color: var(--accent); cursor: pointer;"></iconify-icon>
                </td>
              </tr>
            </tbody>
          </table>

          <div class="pagination">
            <div class="pagination-btn"><iconify-icon icon="mdi:chevron-left"></iconify-icon></div>
            <div class="pagination-btn active">1</div>
            <div class="pagination-btn">2</div>
            <div class="pagination-btn">3</div>
            <div class="pagination-btn">4</div>
            <div class="pagination-btn"><iconify-icon icon="mdi:chevron-right"></iconify-icon></div>
          </div>
        </div>
        
        <!-- 右侧统计面板 -->
        <div class="chart-box">
          <div class="card">
            <div class="card-header">
              <iconify-icon icon="mdi:chart-pie"></iconify-icon>
              房屋类型占比
            </div>
            <div id="chart-container" style="width: 100%; height: 300px;"></div>
          </div>
          
          <div class="card">
            <div class="card-header">
              <iconify-icon icon="mdi:chart-line"></iconify-icon>
              小区关键指标
            </div>
            <div class="indicators">
              <div class="indicator-card" style="background-color: rgba(16, 185, 129, 0.08);">
                <div class="indicator-icon" style="background-color: rgba(16, 185, 129, 0.2);">
                  <iconify-icon icon="mdi:home" style="color: var(--success);"></iconify-icon>
                </div>
                <div class="indicator-value">1378</div>
                <div class="indicator-title">总住户数</div>
              </div>
              
              <div class="indicator-card" style="background-color: rgba(245, 158, 11, 0.08);">
                <div class="indicator-icon" style="background-color: rgba(245, 158, 11, 0.2);">
                  <iconify-icon icon="mdi:clipboard-list" style="color: var(--warning);"></iconify-icon>
                </div>
                <div class="indicator-value">24</div>
                <div class="indicator-title">待处理事项</div>
              </div>
              
              <div class="indicator-card" style="background-color: rgba(59, 130, 246, 0.08);">
                <div class="indicator-icon" style="background-color: rgba(59, 130, 246, 0.2);">
                  <iconify-icon icon="mdi:account" style="color: #3b82f6;"></iconify-icon>
                </div>
                <div class="indicator-value">86%</div>
                <div class="indicator-title">入住率</div>
              </div>
              
              <div class="indicator-card" style="background-color: rgba(239, 68, 68, 0.08);">
                <div class="indicator-icon" style="background-color: rgba(239, 68, 68, 0.2);">
                  <iconify-icon icon="mdi:alert-circle" style="color: var(--danger);"></iconify-icon>
                </div>
                <div class="indicator-value">8</div>
                <div class="indicator-title">异常情况</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 初始化图表
      const chartDom = document.getElementById('chart-container');
      const myChart = echarts.init(chartDom);
      
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: 10,
          top: 'center',
          data: ['公租房', '安置房', '商品房']
        },
        series: [
          {
            name: '房屋类型',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['40%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 6,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '18',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 386, name: '公租房', itemStyle: { color: '#4299e1' } },
              { value: 512, name: '安置房', itemStyle: { color: '#ed8936' } },
              { value: 480, name: '商品房', itemStyle: { color: '#48bb78' } }
            ]
          }
        ]
      };
      
      myChart.setOption(option);
      
      // 树形结构点击切换
      const treeNodes = document.querySelectorAll('.tree-node');
      treeNodes.forEach(node => {
        node.addEventListener('click', function() {
          treeNodes.forEach(n => n.classList.remove('active'));
          this.classList.add('active');
        });
      });
      
      // 区域选项卡切换
      const areaTabs = document.querySelectorAll('.area-tab');
      areaTabs.forEach(tab => {
        tab.addEventListener('click', function() {
          areaTabs.forEach(t => t.classList.remove('active'));
          this.classList.add('active');
        });
      });
    });
  </script>

</body></html>